<template>
  <div>
    <FormTable :formData="formData"
               :columnData="columnData"
               :editData="editData"
               :url="$api.card_getlist"
               :new_url="this.$api.card_insert"
               :detail_url="this.$api.card_info"
               :edit_url="this.$api.card_save"
               :is_default_edit="true"
               label-width="140px"
               :pageConfig="pageConfig"></FormTable>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: [
        {
          name: "name",
          label: "卡卷描述",
          value: "",
          type: "input",
        },
        {
          name: "rights_name",
          label: "权益名称",
          value: "",
          type: "input",
        },
        {
          name: "product_type_id",
          label: "权益会员类型",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
          ]
        },
        {
          name: "recharge_type_id",
          label: "卡券充值类型",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
          ]
        },
        {
          name: "ticket_type_id",
          label: "卡券下发类型",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
          ]
        },
        {
          name: "card_type_id",
          label: "卡券类型",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
          ]
        },
        {
          name: "display",
          label: "是否显示",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
            {
              label: '是',
              value: 1
            },
            {
              label: '否',
              value: 0
            },
          ]
        },
        {
          name: "is_hot",
          label: "是否热门",
          value: '',
          type: "select",
          groups: [
            {
              label: '所有',
              value: ''
            },
            {
              label: '是',
              value: 1
            },
            {
              label: '否',
              value: 0
            },
          ]
        },
      ],
      columnData: [
        {
          prop: "card_id",
          label: "id"
        },
        {
          prop: "name",
          label: "卡卷名称"
        },
        {
          prop: "description",
          label: "描述"
        },
        {
          prop: "rights_name",
          label: "权益名称"
        },
        {
          prop: "product_type_name",
          label: "权益会员类型"
        },
        {
          prop: "amount",
          label: "原价"
        },
        {
          prop: "price",
          label: "售价"
        },
        {
          prop: "recharge_type",
          label: "充值类型"
        },
        {
          prop: "ticket_type",
          label: "下发类型"
        },
        {
          prop: "card_type",
          label: "卡券类型"
        },
        {
          prop: "is_hot",
          label: "是否热门卡券",
          custom: true,
          type: 'switch',
          url: this.$api.card_hot
        },
        {
          prop: "display",
          label: "是否显示",
          custom: true,
          type: 'switch',
          url: this.$api.card_status
        },

        {
          prop: 'btn_group',
          label: '操作',
          custom: true,
          type: 'btn_group',
          width: '200px',
          group: [
            {
              name: '编辑',
              type: 'edit',
              color: 'primary',
              detail_mark: 'card_id',
            },
            {
              name: '删除',
              type: 'delete',
              color: 'danger',
              url: this.$api.card_status
            }
          ]
        }
      ],
      editData: [
        {
          name: 'card_id',
          label: '卡卷id',
          value: '',
          type: 'input',
          display: 'none'
        },
        {
          name: "rights_id",
          label: "权益",
          value: '',
          type: "select",
          groups: [],
          config: {
            filterable: true
          },
          rules: [
            { required: true, message: "请选择权益", trigger: "blur" },
          ]
        },
        {
          name: 'name',
          label: '卡卷名称',
          value: '',
          type: 'input',
          rules: [
            { required: true, message: "请输入卡卷名称", trigger: "blur" },
          ]
        },
        {
          name: 'description',
          label: '描述',
          value: '',
          type: 'input',
          rules: [
            { required: true, message: "请输入卡卷描述", trigger: "blur" },
          ]
        },
        {
          name: 'amount',
          label: '原价',
          value: '',
          type: 'input',
          rules: [
            { required: true, message: "请输入原价", trigger: "blur" },
          ]
        },
        {
          name: 'price',
          label: '售价',
          value: '',
          type: 'input',
          rules: [
            { required: true, message: "请输入售价", trigger: "blur" },
          ]
        },
        {
          name: "recharge_type",
          label: "卡券充值类型",
          value: '',
          type: "select",
          groups: [],
          sel_arr: ['ticket_type'],
          sel_rule: [
            {
              id: 3,
              show_arr: ['ticket_type']
            }
          ],
          rules: [
            { required: true, message: "请选择充值类型", trigger: "blur" },
          ]
        },
        {
          name: "ticket_type",
          label: "卡券下发类型",
          value: '',
          type: "select",
          display: 'none',
          groups: [],
          rules: [
            { required: true, message: "请选择卡券下发类型", trigger: "blur" },
          ]
        },
        {
          name: "card_type",
          label: "卡券类型",
          value: '',
          type: "select",
          groups: [],
          rules: [
            { required: true, message: "请选择卡券类型", trigger: "blur" },
          ]
        },
        {
          name: 'productCode',
          label: '上游产品编码',
          value: '',
          type: 'input',
          rules: [
            { required: true, message: "请输入上游产品编码", trigger: "blur" },
          ]
        },
        {
          name: "product_type_id",
          label: "权益会员类型",
          value: '',
          type: "select",
          config: {
            filterable: true
          },
          groups: [
            {
              label: '无',
              value: ''
            },
          ],
        },

        {
          name: 'web_url',
          label: '外链',
          value: '',
          type: 'input',
          width: '100%'
        },
        {
          name: 'is_hot',
          label: '是否热门卡券',
          value: '',
          type: 'switch',
          config: {
            'active_value': '1',
            'inactive-value': '0'
          }
        },
        {
          name: "display",
          label: "是否显示",
          value: '',
          type: 'switch',
          config: {
            'active_value': '1',
            'inactive-value': '0'
          }
        },
        {
          name: 'image',
          label: '卡卷图片',
          value: '',
          type: 'image_upload',
          width: '100%',
          config: {
            limit: 1,
            accept: ".jpg,.png,.bmp,.gif,.svg",
            fileList: []
            // is_icon:true
          }
        },
        {
          name: 'note_id',
          label: '说明id',
          value: '',
          type: 'input',
          display: 'none'
        },
        {
          name: 'note_content',
          label: '说明内容',
          value: '',
          type: 'editor',
          width: '100%'
        },
      ],
      new_editData: [],
      pageConfig: {
        page: 1,
        pagesize: 10,
      }
    };
  },
  created () {
    this.getProduct_type();
  },
  methods: {
    getProduct_type () {
      // 获取权益会员列表
      let req1 = this.$req.get(this.$api.product_type_getnopagelist)
      // 获取卡券充值类型
      let req2 = this.$req.get(this.$api.card_rechargetype)
      // 获取卡券下发类型
      let req3 = this.$req.get(this.$api.card_tickettype)
      // 获取卡券类型列表
      let req4 = this.$req.get(this.$api.card_cardtype)
      // 获取不分页权益列表
      let req5 = this.$req.get(this.$api.rights_getnopagelist)
      Promise.all([req1, req2, req3, req4, req5]).then(values => {
        this.dataHandler(values[0].data, 2, 10, 'name', 'product_type_id');
        this.dataHandler(values[1].data, 3, 6, 'recharge_type_name', 'recharge_type_id');
        this.dataHandler(values[2].data, 4, 7, 'ticket_type_name', 'ticket_type_id');
        this.dataHandler(values[3].data, 5, 8, 'card_type_name', 'card_type_id');
        this.dataHandler(values[4].data, '', 1, 'name', 'rights_id');
      })
    },
    dataHandler (data, idx1, idx2, labelKey, valueKey) {
      for (var i in data) {
        if (typeof idx1 == 'number') {
          this.formData[idx1].groups.push({
            label: labelKey ? data[i][labelKey] : data[i],
            value: valueKey ? data[i][valueKey] : data[i]
          })
        }
        this.editData[idx2].groups.push({
          label: labelKey ? data[i][labelKey] : data[i],
          value: valueKey ? data[i][valueKey] : data[i],
        })
      }
    },
    handleSizeChange (e) {
      console.log(e);
    },
    handleCurrentChange (e) {
      console.log(e);
    },
    submit (e) {
      console.log(e);
    },
    reset (e) {
      console.log(e);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>